<template>
  <div id='todayTop' v-if='Count'>
      <div class="top">
          <div class="count clearfix" >
              <div class="left">
                  <div class="xiaohao">
                      <i :style= "'background-image: url('+$qiniu.url+'assets/img/xiao-hao.png)'"></i>
                      <h3>今日消耗</h3>
                      <span>{{ Count.data.todayKcal }}</span>千卡
                  </div>
                   <div class="course"  v-if = "Plane.rest != '' && selfCheck.message !=''">
                      <i :style= "'background-image: url('+$qiniu.url+'assets/img/t-plane.png)'"></i>
                      <h3>今日休息</h3>
                  </div>
                  <div class="course" v-else>
                      <i :style= "'background-image: url('+$qiniu.url+'assets/img/t-plane.png)'"></i>
                      <h3>今日选课{{ Count.data.todayCourseNum }}节</h3>
                      <p v-if="Count.data.todayFinishedNum !=0 ">已完成<span>{{ Count.data.todayFinishedNum }}</span>节</p>
                      <p v-else>尚未完成</p>
                  </div>
              </div>
              <div class="right">
                  <div class="wrapper">
                      <div class="out-box"></div>
                      <div v-if=" getUser.sex == '女' " class="per" :style= "'background-image: url('+$qiniu.url+'assets/img/perIcon.png)'"></div>
                      <div v-else class="per" :style= "'background-image: url('+$qiniu.url+'assets/img/perIcon1.png)'"></div>
                      <div class="corRate">总正确率
                          <span class="rate">
                              {{sonnum}}%
                          </span>
                      </div> 
                      <div class="can-wrapper">
                         <canvas id="myCanvas" width="130px" height="130px"></canvas>
                      </div>
                  </div>
              </div>
          </div>
      </div>
   </div>
</template>
<script>
    import {
        setRange
    } from "../../tools.js";
    export default {
        props: ['Count', 'Plane', 'num', 'selfCheck'],
        computed: {
            getUser() {
                return this.$store.state.user;
            }
        },
        methods: {
            // 绘制圆形的进度条
            setRangeRad() {
                //6.25为一个整圆-----绘制圆形进度条 
                var num = (this.sonnum / 100) * 6.25;
                if (this.$route.path == '/today') {
                    setRange("myCanvas", num, 62, "#fcb711", 6);
                } else {
                    return false;
                }
            }
        },
        watch: {
            //进行监听：当父组件的值进行改变的时候，子组件进行改变
            num(val) {
                this.sonnum = val;
                this.setRangeRad();
            },
        },
        data() {
            return {
                sonnum: 0,
                sonCount: null,
                sonPlan: null
            }
        },
        created() {

        },
        mounted() {
            this.$nextTick(function() {

            })
        },

    }
</script>
<style>
    #todayTop {
        .top {
            width: 100%;
            height: 150px;
            padding-left: 2px;
            padding-right: 2px;
            box-sizing: border-box;
            margin-top: 2px;
            position: relative;
        }
        .top .count {
            width: 100%;
            height: 150px;
            /*margin-right: 20px;*/
            padding-top: 9px;
            padding-right: 10px;
            padding-left: 10px;
            border: 1px solid #fdb811;
            /*left: 5px;*/
            box-sizing: border-box;
        }
        .top .count .left {
            width: 50%;
            height: 130px;
            float: left;
            padding-bottom: 10px;
            /*border-right: 1px solid #232939;*/
            font-size: 13px;
            box-sizing: border-box;
            position: relative
        }
        .top .count .left .xiaohao {
            width: 100%;
            height: 65px;
            position: absolute;
            top: 10px;
            left: 20%;
            color: #fff;
        }
        .top .count .left .course {
            width: 100%;
            height: 65px;
            position: absolute;
            top: 85px;
            left: 20%;
            color: #fff;
        }
        .top .count .left .xiaohao i,
        .top .count .left .course i {
            width: 35px;
            height: 40px;
            background-repeat: no-repeat;
            background-size: 100% 100%;
            display: block;
            float: left;
            margin-right: 10px;
        }
        .top .count .left .xiaohao h3,
        .top .count .left .course h3 {
            font-size: 13px;
            font-weight: 400;
            line-height: 20px;
        }
        .top .count .left .xiaohao span,
        .top .count .left .course span {
            color: #fdb811;
        }
        .top .count .right {
            width: 50%;
            height: 130px;
            float: left;
            position: relative;
        }
        .top .count .right .wrapper {
            width: 130px;
            height: 130px;
            /*background-color: red;*/
            position: absolute;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            margin: auto;
        }
        .top .count .right .wrapper .out-box {
            width: 130px;
            height: 130px;
            border-radius: 50%;
            position: absolute;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            margin: auto;
            border: 6px solid #5a6070;
            box-sizing: border-box;
        }
        .top .count .right .wrapper .per {
            width: 90px;
            height: 90px;
            position: absolute;
            background-repeat: no-repeat;
            background-size: contain;
            left: 5px;
            top: 0;
            right: 0;
            bottom: 0;
            margin: auto;
        }
        .top .count .right .wrapper .corRate {
            position: absolute;
            top: 30%;
            left: 49%;
            color: #fff;
            font-size: 13px;
        }
        .top .count .right .wrapper .corRate .rate {
            font-size: 20px;
            line-height: 35px;
        }
        .top .count .right .wrapper .can-wrapper {
            position: absolute;
            top: 0;
            left: 0;
        }
    }
</style>